<template>
	<view class="content">
		<view class="tips">
			提醒：领养曝光台的所有信息均来自网友发布，不代表 官方意见。如有侵犯个人合法权益，请联系客服处理。
		</view>
		<view class="line">
			<view class="line-nik">
				<view class="line-nik-left" @click="setUrl('../addExposure/addExposure')">
					<image src="../../../static/img/wybg.png"></image>
					<span>我要曝光</span>
				</view>
				<view class="line-nik-center"></view>
				<view class="line-nik-right" @click="setUrl('../blacklist/blacklist')">
					<image src="../../../static/img/hmdcx.png"></image>
					<span>黑名单查询</span>
				</view> 
			</view>
		</view>
		<view class="title">最新的领养曝光信息</view>
		<view class="dataList">
			<view class="dataList-item">曝光类型</view>
			<view class="dataList-item">地区</view>
			<view class="dataList-item">联系信息</view>
			<view class="dataList-item">日期</view>
			<view class="dataList-item2"></view>
		</view>
		<scroll-view scroll-y="true" class="table" @scrolltolower="PullUpLoading">
			<view class="table-item" v-for="(item,index) in dataList" :key="index" @click="goDeatils(item.id)">
				<view class="table-item-nik">{{item.type!==1?item.type==2?'恶意领养':'欺诈骗钱':'恶意送养'}}</view>
				<view class="table-item-nik">{{item.city}}</view>
				<view class="table-item-nik">{{item.phone}}</view>
				<view class="table-item-nik">{{(item.createdAt).slice(0,10)}}</view>
				<view class="table-item-nik2"><u-icon name="arrow-right" style="margin-left: -25rpx;" color="#a3a3a3" size="30"></u-icon></view>
			</view>
			<view v-if="onShow" style="width: 100%;height: 100rpx;display: flex;align-items: center;justify-content: center;color: #bcbcbc;">
				到底了，没有更多了~
			</view>
			<view v-if="dataList.length === 0" class="empty"><u-empty mode="data"></u-empty></view>
		</scroll-view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			onShow:false,
			page: 1,
			size: 11,
			total: 0,
			dataList: []
		}
	},
	onPullDownRefresh() {
		this.page = 1
		this.onShow = false
		this.getData()
		setTimeout(function () {
			uni.stopPullDownRefresh();
		}, 1000);
	},
	methods:{
		goDeatils(e){
			uni.navigateTo({
				url: '../addExposure/ExposureInformation?id='+e
			})
		},
		getData(){
			let self = this
			self.$request(self.commonApi.adoptExposure+self.page+'/'+self.size,'GET').then(res=>{
				let data = res.data.data.result
				self.total = res.data.data.meta.total
				self.dataList = data
			})
		},
		setUrl(e){
			uni.navigateTo({
				url: e
			})
		},
		PullUpLoading(){
			if(this.dataList.length < this.total){
				this.page += 1
				let self = this
				self.$request(self.commonApi.adoptExposure+self.page+'/'+self.size,'GET').then(res=>{
					let data = res.data.data.result
					data.forEach(item=>{
						self.dataList.push(item)
					})
					self.onShow = false
				})
			}else{
				this.onShow = true
			}
		}
	},
	onShow() {
		this.onShow = false
		this.page = 1
		this.getData()
	}
};
</script>

<style lang="scss" scoped>
	.empty {
		height: 500rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.table-item-nik{
		width: 24%;
		padding: 20rpx;
		// display: flex;
		// align-items: center;
		// justify-content: center;
		text-align: center;
		font-size: 24rpx;
		color: #434343;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		word-break: break-all;
	}
	.table-item-nik2{
		width: 4%;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		// position: absolute;
		// right: 10rpx;
	}
	.table-item{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-direction: row;
		background: white;
		border-bottom: 1px solid #f2f2f2;
		position: relative;
	}
	.dataList-item2{
		width: 4%;
		height: 100rpx;
	}
	.dataList-item{
		width: 24%;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		font-weight: bold;
	}
	.table{
		width: 100%;
		height: calc(100vh - 426rpx);
		overflow: hidden;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		background: white;
	}
	.dataList{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-direction: row;
		background: white;
		border-bottom: 1px solid #f2f2f2;
	}
	.title{
		width: 100%;
		padding: 20rpx;
		font-size: 28rpx;
		color: #8C8C8C;
	}
	.line-nik-center{
		width: 2%;
		height: 50%;
		border-left: 2px dashed #f2f2f2;
	}
	.line-nik-left,.line-nik-right{
		width: 49%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: row;
		font-size: 32rpx;
		font-weight: bold;
		image{
			width: 50rpx;
			height: 50rpx;
			margin-right: 20rpx;
		}
	}
	.line-nik{
		width: 100%;
		height: 100rpx;
		background: white;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-direction: row;
	}
	.line{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		padding-top: 20rpx;
	}
	.tips{
		width: 100%;
		padding: 20rpx;
		background: #fff9ec;
		line-height: 45rpx;
		font-size: 28rpx;
		color: #e6c062;
	}
.content {
	width: 100%;
	height: 100vh;
	background: #f2f2f2;
	display: flex;
	flex-direction: column;
}
</style>
